<template>
    <div class="page-div ">
        <div class="title-box">
            <div class="icon-hint border-red"></div>
        </div>
        <div class="tab-box">
            <div>
                <div class="tab-item" @click="itemClick(item)" v-for="(item, index) in list" :key="index">
                <div class="item-check border-red" v-if="item.isCheck">

                </div>
                <div class="item-no-check" v-else>
                    <div class="icon-no-check border-red"></div>
                    <div class="item-name">{{ item.name }}</div>
                </div>
                <div class="line-item" v-if="list.length - 1 != index">/</div>
            </div>
            </div>
        </div>
        <div class="tab-list-box border-red">
            <div class="left-icon-box border-red">

            </div>
            <div class="tab-list-option">
                <div class="list-box" v-for="(item,index) in tabList" :key="index">
                    <div class="list-icon"></div>
                    <div class="item-txt">{{ item.txt }}</div>
                    <div class="item-price">{{ item.price }}折</div>
                    <div class="item-btn">我有卡回收</div>
                </div>
            </div>
            <div class="right-icon-box border-red">

            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            indexCurrent: 0,
            list: [
                {
                    isCheck: true,
                    name: '话费卡',
                    id: 1,
                },
                {
                    isCheck: false,
                    name: '加油卡',
                    id: 2,
                },
                {
                    isCheck: false,
                    name: '游戏卡',
                    id: 3,
                },
                {
                    isCheck: false,
                    name: '电商卡',
                    id: 4,
                },
                {
                    isCheck: false,
                    name: '商超卡',
                    id: 5,
                },
                {
                    isCheck: false,
                    name: '美食券',
                    id: 6,

                },
                {
                    isCheck: false,
                    name: '出行券',
                    id: 7,

                },
                {
                    isCheck: false,
                    name: '影音券',
                    id: 8,
                }
            ],
            tabList:[
            {
                    icon: '',
                    txt: '京东e卡',
                    price: '98.4',
                },
                {
                    icon: '',
                    txt: '京东e卡',
                    price: '98.4',
                },
                {
                    icon: '',
                    txt: '京东e卡',
                    price: '98.4',
                },
                {
                    icon: '',
                    txt: '京东e卡',
                    price: '98.4',
                },
            ]
        }
    },
    computed: {

    },
    methods: {
        itemClick(checkItem) {
            this.list.map(item => {
                if (item.id == checkItem.id) {
                    item.isCheck = true
                } else {
                    item.isCheck = false
                }
            })
        }
    }
}
</script>

<style scoped>
.page-div {
    background: #F8FAFC;
}

.title-box {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-hint {
    width: 287px;
    height: 64px;
}

.tab-box {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.tab-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.item-no-check {
    display: flex;
    align-items: center;
    margin-right: 42px;
    margin-left: 42px;
}

.icon-no-check {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

.item-name {
    font-weight: 700;
    font-size: 18px;
    color: #000E26;
}

.item-check {
    width: 148px;
    height: 70px;
    margin-right: 10px;
}

.line-item {
    color: #DBDBDB;
}

.tab-list-box {
    margin-top: 51px;
    display: flex;
    align-items: center;
    justify-content:center;
}
.tab-list-option{
    display: flex;
    align-items: center;
}

.list-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 214px;
    height: 288px;
    background: #FFFFFF;
    box-shadow: 0px 1px 11px 0px rgba(25, 139, 252, 0.04);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ECF2F7;
    margin-right: 24px;
}
.left-icon-box{
    width: 58px;
    height: 58px;
    margin-right: 20px;
}
.right-icon-box{
    width: 58px;
    height: 58px;
    margin-left: 20px;
}
.list-icon {
    width: 125px;
    height: 125px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
}

.item-txt {
    margin-top: 24px;
    font-weight: 500;
    font-size: 18px;
    color: #08152D;
}

.item-price {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #FF6B06;
}

.item-btn {
    width: 124px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 238px;
    border: 1px solid #198BFC;
    font-weight: 500;
    font-size: 14px;
    color: #198BFC;
    margin-top: 24px;

}
</style>
